<template>
    <div class="pay">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="main">
            <div class="step">
                <Steps :current="0">
                    <Step title="提交预约"></Step>
                    <Step title="核对并支付"></Step>
                    <Step title="完成订单"></Step>
                </Steps>
            </div>
            <div class="orderForm">
               <p class="tit">|确认购买产品</p>
                <ul class="title">
                    <li>产品名称</li>
                    <li>现价</li>
                    <li>优惠</li>
                    <li>操作</li>
                </ul>
                <ul class="cont">
                    <li><div class="payimg"><img src="../Pay/img/pay.png" alt=""></div>
                        <div class="paycont"><p>【鼻综合】向不美的鼻子Say ByeBye!</p><p>北京金圣整形医疗美容</p><p> 有效期：一个月</p></div>
                    </li>
                    <li class="price">
                        <p>￥19500</p>
                        <s>￥36800</s>
                    </li>
                    <li></li>
                    <li><p>在线客服</p></li>
                </ul>
                <div class="cut">
                    <Tabs value="name1">
                        <TabPane label="绑定手机号码" name="name1">
                            <div class="email">
                                <p class="email-title">您的手机号</p>
                                <p>提交预约并支付定金后，预约券密码以短信方式发送到该手机号，凭手机号和预约券密码去医院，支付余下部分，即可享受改产品。</p>
                                <p> 注：该手机号将作为接受预约券密码的唯一手机号，请慎重填写！</p>
                                <div class="email-cont">
                                    <div style="margin: 22px 0 25px -127px;"> <span>验证码 </span><input class="int" type="text"><div style="display: inline-block;margin-left:18px;border: 1px solid #eeeeee;width: 102px;	height: 30px;text-align: center;padding: 5px">2346</div> </div>
                                    <div style="margin-bottom: 21px"><span>手机号 </span><input type="text" ><button>发送验证码</button></div>
                                    <div><span>验证码 </span><input type="text" placeholder="请输入短信中的验证码" style="padding-left: 5px" ><button>绑定手机号</button></div>
                                </div>
                            </div>
                        </TabPane>
                        <TabPane label="绑定邮箱" name="name2">
                            <div class="email">
                                <p class="email-title">您的邮箱</p>
                                <p>提交预约并支付定金后，预约券密码以短信方式发送到该手机号，凭手机号和预约券密码去医院，支付余下部分，即可享受改产品。</p>
                                <p> 注：该手机号将作为接受预约券密码的唯一手机号，请慎重填写！</p>
                                <div class="email-cont">
                                    <div style="margin: 22px 0 25px -127px;"> <span>验证码 </span><input class="int" type="text"><div style="display: inline-block;margin-left:18px;border: 1px solid #eeeeee;width: 102px;	height: 30px;text-align: center;padding: 5px">2346</div> </div>
                                    <div style="margin-bottom: 21px"><span>邮箱号 </span><input type="text" ><button>发送验证码</button></div>
                                    <div><span>验证码 </span><input type="text" placeholder="请输入邮箱中的验证码" style="padding-left: 5px" ><button>绑定邮箱</button></div>
                                </div>
                            </div>
                        </TabPane>

                    </Tabs>

                </div>

                <div class="order-list">
                    <ul>
                        <li><div class="order-left">已绑手机号</div><div  class="order-right">13512648946 <span>更换</span> </div></li>
                        <li><div class="order-left">个数</div><div  class="order-right"> <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> </div></li>
                        <li><div class="order-left">商品金额</div><div  class="order-right">￥19600 </div></li>
                        <li><div class="order-left"><Icon type="ios-add-circle-outline" /><span style="padding-left: 5px">使用红包抵现</span></div><div  class="order-right">￥0.00 </div></li>
                        <li><div class="order-left">
                            <select name="" id="">
                            <option value="">新人注册红包</option>
                            </select></div>
                            <div  class="order-right"><button>取消</button> </div>
                            <p style="clear: both;padding-top: 10px">输入红包号码</p>
                            <div class="order-left"><input type="text"></div>
                            <div  class="order-right"><button>兑换</button> </div>
                            <p style="clear: both;">仅限使用单个红包，红包仅可使用一次，不退还，不找零</p>
                        </li>
                        <li><div class="order-left">需支付</div><div  class="order-right" style="color: #ff6808;font-size: 24px">￥3900.00 </div></li>
                        <li><div class="order-left">到院再付</div><div  class="order-right"style="color: #999999;font-size: 24px">￥15600.00 </div></li>
                    </ul>
                </div>
                <div class="line"></div>
                <Button type="primary" @click="next()" class="payment">去付款</Button>

            </div>

        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "index",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        data () {
            return {
                current: 0,
                num1: 1

            }
        },
        methods: {
            next () {
              this.$router.push({path:'/collate'})
            }
        }
    }
</script>

<style lang="less" scoped>
    .ivu-icon{
        font-size: 18px;
        color: #0499e7;
    }
    .main{
        background-color:#FFFBFC;
        .step{
            width: 1200px;
            padding:30px 0 20px 200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .orderForm{
            width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 60px;
            overflow: hidden;
            .tit{
                color: #ff5371;
                font-size: 20px;
                margin-bottom: 20px;
            }
            .title li{
                width: 210px;
                height: 57px;
                line-height: 57px;
                border: 1px solid #eeeeee;
                border-right: none;
                text-align: center;
                background-color:#FFFBFC ;
                float: left;
            }
            .cont{
                clear: both;
                overflow: hidden;
            }
            .cont li{
                width: 210px;
                height: 92px;
                border: 1px solid #eeeeee;
                border-top: none;
                border-right: none;
                float: left;
            }
            .cont li:first-child,.title li:first-child{
                width: 425px;
            }
            .cont li:last-child,.title li:last-child{
                width: 230px;
                border-right:1px solid #eeeeee ;
            }
            .cont .payimg{
                float: left;
                margin: 16px;
            }
            .paycont{
                float: left;
                line-height: 20px;
                margin: 16px 0 16px 0;
            }
            .paycont p:first-child{
                color: #333333;
            }
            .paycont p:nth-child(2){
                color: #999999;
            }
            .paycont p:last-child{
                color: #ff5371;
            }
            .price{
                text-align: center;
            }
            .price p{
                color: #ff6906;
                font-size: 20px;
                line-height: 57px;
            }
            .price s{
                color: #999999;
            }
            .cont li:last-child p{
                text-align: center;
                line-height: 92px;
                color: #ff5371;
            }
            .email{
                width: 1080px;
                height: 283px;
                margin-top: 5px;
                border: solid 1px #e0e0e0;
                .email-title{
                    text-align: center;
                    font-size: 16px;
                    height: 36px;
                    line-height: 36px;
                    background-color: #fffbfc;
                    margin-bottom: 23px;
                }
                p{
                    text-align: center;
                }
            }
            .email-cont{text-align: center}
            .email-cont input{
                margin-left: 10px;
                width: 224px;
                height: 30px;
            }
            .email-cont button{
                width: 114px;
                height: 30px;
                background-color: #ff5371;
                border-radius: 2px;
                outline: none;
                border: none;
                color: #fff;
                margin-left: 21px;
            }
            .int{
                width: 114px!important;
                height: 30px;
            }
            .order-list{
                float: right;
                width: 460px;
                margin-top: 40px;
                li{
                    height: 30px;
                    line-height: 30px;
                    overflow: hidden;
                    margin-bottom: 18px;
                    padding-bottom: 51px;
                    border-bottom: 1px dashed #eeeeee;
                }
                li:nth-child(5){
                    height: 150px;
                }
                li:nth-child(5) p{
                    color: #999999;
                }
                li:nth-last-child(2),li:last-child{
                    border-bottom:none;
                    padding-bottom: 20px;
                }
                .order-left{
                   float: left;
                    color: #333333;
                    font-size: 14px;
                }
                .order-left select,.order-left input{
                    width: 377px;
                    height: 24px;
                    border: solid 1px #e0e0e0;
                    color: #999999;
                    font-size: 12px;
                }
                .order-right{
                    float: right;
                }
                .order-right span{
                    color: #ff5371;
                }
                .order-right button{
                    outline: none;
                    border: none;
                    width: 58px;
                    height: 24px;
                    line-height: 24px;
                    color: #fff;
                    background-color: #fd5528;
                }

            }
            .line{
                clear: both;
                border: .5px solid #ff5371;
            }
            .payment{
                margin-top: 10px;
                float: right;
                width: 220px;
                height: 50px;
                font-size: 24px;
            }


        }
    }
</style>